<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    div {
      margin: 4px;
      padding: 8px;
      height: fit-content;
      width: fit-content;
      border: 1px solid pink;
      column-count: 2;
      column-gap: 8px;
    }
  </style>
  <body></body>
  <script>
    function img() {
      const randomNum = Math.floor(Math.random() * 1000);
      const height = Math.floor(Math.random() * 200 + 300);

      //构造图片 URL
      const imgUrl = `https://picsum.photos/200/${height}?random=${randomNum}`;
      //输出图片 URL
      return imgUrl;
    }

    Promise.resolve().then(() => {
      console.log("start");
      const container = document.createElement("div");
      for (let i = 0; i < 5; i++) {
        const imgEl = document.createElement("img");
        // div.style.width = '200px'
        // div.style.height = '200px'
        imgEl.src = img();
        container.appendChild(imgEl);
      }

      const body = document.querySelector("body");
      body.appendChild(container);
    });
  </script>
</html>
